<template>
  <div class="max-w-6xl mx-auto p-6 min-h-screen bg-gradient-to-br from-slate-50 to-emerald-50">

    <div class="text-center mb-8 p-8 bg-white rounded-2xl shadow-lg">
      <h2 class="flex items-center justify-center gap-3 text-3xl font-semibold text-gray-800 mb-2">
        <n-icon class="text-4xl text-emerald-500" :component="DocumentIcon" />
        入党申请书编辑
      </h2>
      <p class="text-gray-600">请更新或填写入党申请书的相关信息</p>
    </div>

    <div class="mb-6 bg-gradient-to-r from-emerald-50 to-green-50 border border-emerald-200 rounded-2xl p-6 shadow-sm">
      <div class="flex items-center gap-3 mb-4">
        <n-icon class="text-2xl text-emerald-600" :component="InfoIcon" />
        <h3 class="text-lg font-semibold text-emerald-800">重要提示信息</h3>
      </div>
      <div class="space-y-2">
        <div v-for="(tip, index) in tipMessages" :key="index" class="flex items-start gap-3 text-sm text-emerald-700">
          <div class="flex-shrink-0 w-1.5 h-1.5 bg-emerald-500 rounded-full mt-2"></div>
          <span>{{ tip }}</span>
        </div>
      </div>
    </div>

    <n-card class="mb-6 rounded-2xl border-0 shadow-lg bg-white overflow-hidden" :bordered="false">
      <template #header>
        <div class="flex items-center gap-3 py-2">
          <n-icon class="text-xl text-emerald-500" :component="InfoIcon" />
          <span class="text-lg font-semibold text-gray-800">文书信息</span>
        </div>
      </template>

      <n-form ref="formRef" :model="formValue" label-placement="top">
        <n-grid :cols="24" :x-gap="24">
          <n-form-item-gi
            :span="24"
            label="入党申请书提交日期"
            path="signatureDate"
            :validation-status="validationStatus"
            :feedback="validationFeedback"
          >
            <n-date-picker
              v-model:formatted-value="formValue.signatureDate"
              type="date"
              value-format="yyyy-MM-dd"
              style="width: 100%"
              placeholder="请选择日期"
              class="rounded-lg"
              clearable
              @update:formatted-value="handleDateChange"
            />
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </n-card>

  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue' 
import { 
  NForm, NFormItem, NDatePicker, NCard, NIcon, NGrid, NFormItemGi
} from 'naive-ui'
import { 
  DocumentTextOutline as DocumentIcon,
  InformationCircleOutline as InfoIcon
} from '@vicons/ionicons5'

const props = defineProps({
  member: { type: Object, required: true },
  validation: { type: Array, default: () => [] }  // ✅ 改为 Array
})

const formRef = ref(null)

// ✅ 简化表单结构，直接使用 signatureDate
const formValue = ref({
  signatureDate: props.member?.applicationForm?.signatureDate || null
})

// 定义emit
const emit = defineEmits(['auto-save'])

// 提示信息
const tipMessages = ref([])

const generateTipMessages = () => {
  tipMessages.value = [
    '日期一旦提交，将作为重要的时间节点记录，请确保准确无误。',
    '提交日期应早于或等于被确定为入党积极分子的日期。',
    '如果日期不确定，请与党支部相关负责人核实。',
    '系统会自动保存您的修改。'
  ]
}

onMounted(() => {
  generateTipMessages()
})

// ✅ 验证状态处理
const validationStatus = computed(() => {
  if (!props.validation || props.validation.length === 0) return undefined
  
  const hasError = props.validation.some(v => v.level === 'error')
  const hasInfo = props.validation.some(v => v.level === 'info')
  
  if (hasError) return 'error'
  if (hasInfo) return 'warning'
  return 'success'
})

const validationFeedback = computed(() => {
  if (!props.validation || props.validation.length === 0) return ''
  
  const errorMsg = props.validation.find(v => v.level === 'error')
  const infoMsg = props.validation.find(v => v.level === 'info')
  
  return errorMsg?.message || infoMsg?.message || ''
})

// 处理日期变化，触发自动保存
const handleDateChange = (value) => {
  formValue.value.signatureDate = value
  // 触发自动保存
  emit('auto-save')
}

// ✅ 暴露方法：返回扁平化的数据结构
defineExpose({
  getEditedData: () => {
    console.log('ApplicationFormEditor - getEditedData called')
    console.log('ApplicationFormEditor - signatureDate:', formValue.value.signatureDate)
    
    // 返回扁平化的数据，匹配 applicationForm 对象的结构
    return {
      signatureDate: formValue.value.signatureDate
    }
  }
})
</script>
